/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from 'react'
import { Menu } from 'antd';
import menuConfig from '../../config/menu';
import './index.scss'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { switchMenuAction } from '../../store/action'
const { SubMenu } = Menu;

export class Index extends Component {
    state = {
        menuItem: ''
    }
    componentDidMount() {
        let menuItem = this.getMenuItem(menuConfig)
        // console.log(menuItem)
        this.setState({ menuItem })
    }
    // 获取菜单方法,直接遍历
    getMenuItem = (data) => {
        // console.log(data)
        return data.map(item => {
            if (item.children) {
                return <SubMenu key={item.key} title={item.title}>
                    {this.getMenuItem(item.children)}
                    {/* {item.children.map(items => {
                            // console.log(items)
                            return <Menu.Item key={items.key} title={items.title}>{items.title}</Menu.Item>
                        })
                    } */}
                </SubMenu>
            } else {
                return <Menu.Item key={item.key} title={item.title} onClick={e => this.switchMenu(item.title)}>
                    <Link to={item.key}>{item.title}</Link>
                </Menu.Item>
            }
        })
    }

    render() {
        return (
            <div className='nav-left'>
                <div className='logo'>
                    <img src="/assets/logo-ant.svg" />
                    <h1>金渡CMS</h1>
                </div>
                <Menu mode="inline" theme="dark">
                    {this.state.menuItem}
                </Menu>
            </div>
        );
    }
    switchMenu(menuName) {
        console.log(this.props)
        const { dispatch } = this.props
        dispatch(switchMenuAction(menuName))
    }
}

export default connect()(Index)

// import React, { Component } from 'react'
// import { Menu } from 'antd';
// import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';

// const { SubMenu } = Menu;

// export class Index extends Component {
//     render() {
//         return (
//             <div className='nav-left'>
//                 <div>
//                     <Menu mode="inline" theme="dark"
//                     defaultSelectedKeys={['1']}
//                     defaultOpenKeys={['hah1']}>
//                         <Menu.Item key="1" icon={<MailOutlined />}>
//                             Navigation One
//                         </Menu.Item>
//                         <Menu.Item key="2" disabled icon={<AppstoreOutlined />}>
//                             Navigation Two
//                         </Menu.Item>
//                         <SubMenu key="hah1" icon={<SettingOutlined />} title="Navigation Three - Submenu">
//                                 <Menu.Item key="setting:1">Option 1</Menu.Item>
//                                 <Menu.Item key="setting:2">Option 2</Menu.Item>
//                                 <Menu.Item key="setting:3">Option 3</Menu.Item>
//                                 <Menu.Item key="setting:4">Option 4</Menu.Item>
//                         </SubMenu>
//                         <Menu.Item key="haha2">
//                             <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
//                                 Navigation Four - Link
//                             </a>
//                         </Menu.Item>
//                     </Menu>
//                 </div>
//             </div>
//         );
//     }
// }

// export default Index